<template>
    <div class="b_box">
        <hr style="border:0px; background-color:white;">
        <template v-for="item in shuju" :key=item.username>
            <div class="b_smallbox" @click="tiaozhuan">
                <div class="b_img">
                    <img :src=item.img>
                </div>
                <div class="b_suporttime" @click.stop="yisheng">
                    <span>{{item.username}}</span><br>
                    <span>{{item.messagetime}}</span>
                </div>
                <div style="color:black; font-size:14px;margin-bottom: 10px;">
                    {{item.submessage}}
                </div>
                <div class="b_message" style="font-size:14px;">
                    {{item.message}}
                </div>
            </div>
            <hr style="margin-top:25px; border: 0.5px solid #f2f2f2;">
        </template>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import { getreceivemelist } from "@/api/messagelist"
    import {useRouter} from 'vue-router';
    const router = useRouter();
    let shuju=ref([])
    getreceivemelist().then((res:any)=>{
        // console.log(res.data.data)
        shuju.value=res.data.data
    })
    const tiaozhuan=()=>{
        router.push({
            path:'/answerdetails'
        })
    }
    let yisheng=()=>{
        router.push({
            path:'/DoctorHome'
        })
    }
</script>
<style scoped>
    .b_box{
        width: 100%;
        height: 650px;
        background-color: white;
        overflow-y: auto;
    }
    .b_smallbox{
        width: 90%;
        margin: 15px auto;
    }
    .b_img{
        float: left;
        /* background-color: red; */
    }
    img{
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .b_suporttime{
        height: 65px;
    }
    .b_suporttime span{
        margin-left: 4%;
    }
    .b_suporttime span:first-child{
        color: black;
    }
    .b_suporttime span:last-child{
        color: #a39f9f;
    }
    .b_message{
        width: 100%;
        height: 45px;
        background-color: #f2f2f2;
        border-radius: 6px;
        color: #adadab;
        text-align: center;
        line-height: 45px;
    }
</style>